<template>
    <div class="header">
        <div class="header-left">
            <div class="mainimg"><img :src="user.userPicture" alt=""></div>
            <div class="left-title">
                <div class="main-title">
                    <div class="name">{{ user.userName }}</div>
                </div>
                <div class="userid">用户 ID: {{ user.id }}</div>
            </div>
            <div class="detail">
                <div class="phone">
                    <p>手机号码: <text>{{ user.userTel }}</text></p>
                </div>
                <div class="time">
                    <p>注册时间: <text>{{ user.createTime }}</text></p>
                </div>
            </div>
            <div class="detail" style="margin-top:-30px">
                <div class="phone">
                    <p>微信绑定: <text>未绑定</text></p>
                </div>
            </div>
            <div class="personedit-icon" @click="editpersonmsg">
                <el-icon>
                    <EditPen />
                </el-icon>&nbsp;
                <span>修改</span>
            </div>
        </div>
    </div>
    <div class="center">
        <div>
            <div style="margin:20px;padding-top:10px;justify-content: space-between;display: flex;">
                实名认证
                <div class="edit-icon" @click="editidentify">
                    <el-icon>
                        <EditPen />
                    </el-icon>&nbsp;
                    <span>修改</span>
                </div>
            </div>
            <div class="content">
                <div class="one">
                    <div class="detail">
                        <p class="label">账号类型: </p>
                        <p class="msg">企业账号</p>
                    </div>
                    <div class="detail">
                        <p class="label">认证状态: </p>
                        <p class="msg flag">{{ companyInfo.companyVerifyStatus === 0 ? '待审核' : companyInfo.companyVerifyStatus === 1 ? '审核通过' : companyInfo.companyVerifyStatus === 2 ? '驳回' : '未知' }}</p>
                    </div>
                    <div class="detail">
                        <p class="label">认证时间: </p>
                        <p class="msg">{{ companyInfo.createTime }}</p>
                    </div>
                </div>
                <div class="two">
                    <div class="detail">
                        <p class="label">公司/个体名称: </p>
                        <p class="msg">{{ companyInfo.companyName }}</p>
                    </div>
                    <div class="detail">
                        <p class="label">企业证件类型: </p>
                        <p class="msg">营业执照</p>
                    </div>
                    <div class="detail">
                        <p class="label">组织机构代码: </p>
                        <p class="msg">{{ companyInfo.companyCode }}</p>
                    </div>
                </div>
                <div class="three">
                    <div class="detail">
                        <p class="label">法人姓名: </p>
                        <p class="msg">{{ companyInfo.cardName }}</p>
                    </div>
                    <div class="detail">
                        <p class="label">法人证件类型: </p>
                        <p class="msg">二代身份证</p>
                    </div>
                    <div class="detail">
                        <p class="label">法人证件号码: </p>
                        <p class="msg">{{ companyInfo.cardCode }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <p>认证记录</p>
        <!-- 数据表格 -->
        <div class="table-container">
            <el-table :data="tableData" style="width: 97%;margin:auto" border stripe
                :header-cell-style="{ background: '#f5f7fa' }">
                <!-- 表格列定义保持不变 -->
                <el-table-column prop="verifyType" label="认证类型" min-width="120" />
                <el-table-column prop="verifyContent" label="认证内容" min-width="120" />
                <el-table-column prop="verifyStatus" label="当前状态" min-width="120">
                    <template #default="scope">
                        <el-tag :type="statusType(scope.row.verifyStatus)">
                            {{ statusText(scope.row.verifyStatus) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" min-width="160" />
                <el-table-column label="操作" width="180" fixed="right">
                    <template #default="scope">
                        <el-button-group>
                            <el-button type="primary" size="small" @click="handleView(scope.row)">查看</el-button>
                            <el-button type="default" size="small" @click="edithandleClick(scope.row)">修改</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination v-model:currentPage="pagination.currentPage" v-model:page-size="pagination.pageSize"
                    :total="pagination.total" :page-sizes="[10, 20, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" background="true" />
            </div>
        </div>
    </div>
    <!--修改个人信息-->
    <editpersonDrawer v-model:visible="personVisible" :row-data="personMsgData" />
    <!--修改实名认证-->
    <editAuthenticateDrawer v-model:visible="authenticateVisible" :row-data="companyMsgData" />
    <!--修改认证记录-->
    <recordAuthDrawer v-model:visible="recordAuthVisible" :row-data="companyMsgData" />
    <!--查看认证记录-->
    <lookAuthDrawer v-model:visible="lookAuthVisible" :row-data="companyMsgData" />


    <!--查看认证记录-->
    <!-- <el-dialog v-model="dialogVisibleDetail" title="详情" width="800">
        <div class="look-dialog">
            <el-form style="max-width: 600px;display: flex;" :model="sizeForm" label-width="auto" label-position="top">
                <div>
                    <el-form-item label="营业执照: ">
                        <img class="smallimg" src="../assets/background.png" alt="" @click="photoShow">
                    </el-form-item>
                    <el-form-item label="企业名称: ">
                        <el-input v-model="sizeForm.name" disabled autosize />
                    </el-form-item>
                    <el-form-item label="统一社会信用代码: ">
                        <el-input v-model="sizeForm.code" disabled autosize />
                    </el-form-item>
                    <el-form-item label="注册地址: ">
                        <el-input v-model="sizeForm.address" disabled autosize />
                    </el-form-item>
                    <el-form-item label="营业期限: ">
                        <el-input v-model="sizeForm.time" disabled autosize />
                    </el-form-item>
                </div>
                <div class="dialog-right">
                    <el-form-item label="法人身份证: ">
                        <div style="display: flex;">
                            <img class="usersmallimg" src="../assets/background.png" alt="" @click="photoShow">
                            <img class="usersmallimg" src="../assets/background.png" alt="" style="margin-left:10px"
                                @click="photoShow">
                        </div>
                    </el-form-item>
                    <el-form-item label="法人姓名: ">
                        <el-input v-model="sizeForm.username" disabled autosize />
                    </el-form-item>
                    <el-form-item label="证件号码: ">
                        <el-input v-model="sizeForm.iencode" disabled autosize />
                    </el-form-item>
                    <el-form-item label="手机号: ">
                        <el-input v-model="sizeForm.phone" disabled autosize />
                    </el-form-item>
                    <el-form-item label="账号昵称: ">
                        <el-input v-model="sizeForm.nick" disabled autosize />
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisibleDetail = false">驳回</el-button>
                <el-button type="primary" @click="dialogVisibleDetail = false">
                    通过
                </el-button>
            </div>
        </template>
    </el-dialog> -->
    <!--放大图片-->
    <!-- <el-dialog v-model="dialogVisiblePhoto" title="" width="800">
        <img src="../assets/background.png" alt="" style="width: 765px;height: 500px;">
    </el-dialog> -->
</template>

<script setup>
import { tr } from 'element-plus/es/locales.mjs';
import editpersonDrawer from './editPersonMsg.vue';
import editAuthenticateDrawer from './editAuthenticate.vue';
import recordAuthDrawer from './recordAuth.vue';
import lookAuthDrawer from './lookAuth.vue';
import { getInfo, userCompanyVerifyLog } from "@/api/personCenter";
import { ref, onMounted, onUnmounted, computed, reactive, defineProps, defineEmits, watch } from 'vue'

// import { companyInforeview } from "@/api/user";
// // 详情
// const dialogVisibleDetail = ref(false)
// // 放大图片
// const dialogVisiblePhoto = ref(false)
// 修改个人信息
const personVisible = ref(false)
// 修改实名认证
const authenticateVisible = ref(false)
const recordAuthVisible = ref(false)
const lookAuthVisible = ref(false)
// const sizeForm = reactive({})

const user = ref({})
const companyInfo = ref({})

const personMsgData = ref({});
const companyMsgData = ref({});

// 修改个人信息
const editpersonmsg = () => {
    personVisible.value = true
}
// 修改实名认证
const editidentify = () => {
    authenticateVisible.value = true
}
// 修改认证记录
const edithandleClick = (row) => {
    recordAuthVisible.value = true
}
// 查看
const handleView = (row) => {
    lookAuthVisible.value = true
};


// 放大图片
// const photoShow = () => {
//     dialogVisiblePhoto.value = true;
// }



// 原始表格数据
const tableData = ref([
    
])

// 状态类型
const statusType = (verifyStatus) => {
    switch (verifyStatus) {
        case 0: return 'warning'
        case 1: return 'primary'
        case 2: return 'danger'
    }
};
// 状态文本
const statusText = (verifyStatus) => {
    switch (verifyStatus) {
        case 0: return '审核中'
        case 1: return '已通过'
        case 2: return '已驳回'
    }
};

// 分页配置
const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0
});

const fetchData = () => {
    const userId = localStorage.getItem("userId")
    getInfo(userId)
        .then((res) => {
            if (res.code === 200) {
                res.data.user.createTime = new Date(res.data.user.createTime).toLocaleString()
                res.data.companyInfo.createTime = new Date(res.data.companyInfo.createTime).toLocaleString()
                res.data.companyInfo.isTime = String(res.data.companyInfo.isTime)

                user.value = res.data.user
                personMsgData.value = res.data.user
                companyInfo.value = res.data.companyInfo
                companyMsgData.value = res.data.companyInfo

                listdata()
            }
        })
        .catch((err) => {
            console.error('发送失败:', err);
        });
};

const listdata = () => {
    const parmas = {
        userId: localStorage.getItem("userId"),
        pageNum: pagination.currentPage,
        pageSize: pagination.pageSize
    }
    userCompanyVerifyLog(parmas)
        .then((res) => {
            if (res.code === 200) {
                tableData.value = res.data.records
            }
        })
        .catch((err) => {
            console.error('发送失败:', err);
        });
}

//  首次加载 
fetchData()

// 分页大小变化
const handleSizeChange = (size) => {
    pagination.pageSize = size;
    fetchData();
};

// 当前页变化
const handleCurrentChange = (page) => {
    pagination.currentPage = page;
    fetchData();
};




</script>

<style scoped lang="scss">
.header {
    height: 140px;
    background: #FFFFFF;
    border-radius: 10px;
    margin-top: 10px;

    .header-left {
        display: flex;
        align-items: center;



        .mainimg img {
            margin: 20px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        .left-title {
            display: flex;
            flex-direction: column;
            padding-right: 60px;
            border-right: 1px solid #EEEEEE;

            .main-title {
                display: flex;
                justify-content: center;
                align-items: center;

                .name {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 600;
                    font-size: 20px;
                    color: #333333;
                    margin-right: 10px;
                }

                .sub {
                    img {
                        width: 83px;
                        height: 22px;
                    }
                }
            }

            .userid {
                font-size: 14px;
                color: #333333;
                margin-top: 10px;
            }
        }

        .detail {
            margin-left: 60px;

            .phone,
            .time {
                p {
                    font-size: 14px;
                    color: #333333;
                }

                text {
                    font-size: 14px;
                    color: #999999;
                }
            }
        }
    }


}

.center {
    height: 200px;
    background: #FFFFFF;
    border-radius: 10px;
    margin-top: 20px;

    .tab-area {
        margin-left: 20px;
    }

    .square {
        .detail {
            display: flex;
            margin-left: 20px;

            .label {
                font-size: 14px;
                color: #999999;
                font-weight: 400;
            }

            .msg {
                font-weight: 500;
                font-size: 14px;
                color: #52C41A;
                margin-left: 10px;
            }
        }
    }

    .content {
        margin-left: 20px;
        display: flex;
        justify-content: space-between;

        .one,
        .two,
        .three {
            margin-right: 40px;
            padding-right: 40px;

            .detail {
                display: flex;

                .label {
                    font-size: 14px;
                    color: #999999;
                    font-weight: 400;
                }

                .msg {
                    font-weight: 500;
                    font-size: 14px;
                    color: #333333;
                    margin-left: 10px;
                }

                .flag {
                    color: #52C41A;
                }
            }

        }

        .one,
        .two {
            border-right: 1px solid #EEEEEE;
        }
    }

}

.footer {
    margin-top: 20px;
    background: #FFFFFF;
    border-radius: 10px;

    p {
        padding: 20px 0px 0px 20px;
    }

}



.pagination-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 20px;
}

.custom-pagination {
    --el-pagination-hover-bg-color: #f5f7fa;
    --el-pagination-bg-color: transparent;
    --el-pagination-text-color: #606266;
    --el-pagination-button-disabled-bg-color: #f5f7fa;
    --el-pagination-button-disabled-text-color: #c0c4cc;
}

.pagination-pages {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 0;
    margin: 0 4px;
    background-color: transparent;
    border: 1px solid #dcdfe6;
    color: #606266;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn:hover {
    color: #409eff;
}

.pagination-btn.active {
    background-color: #409eff;
    color: #fff;
    border-color: #409eff;
}

.pagination-btn.disabled {
    color: #c0c4cc;
    cursor: not-allowed;
}

.smallimg {
    width: 250px;
    height: 140px;
    cursor: pointer;
}

.usersmallimg {
    width: 200px;
    height: 140px;
    cursor: pointer;
}

.dialog-right {
    margin-left: 80px;
}

.personedit-icon {
    position: absolute;
    right: 50px;
}

.edit-icon,
.personedit-icon {
    font-size: 14px;
    color: #2D7AF7;
    cursor: pointer;
}
</style>